<template>
    <div class="main-content">
        <el-dialog title="审核" :visible.sync="shebiebaosunYesnoTypesVisible">
            <el-form :model="form">
                <input type="hidden" v-model="form.id">
                <el-form-item label="审核">
                    <el-select v-model="form.shebiebaosunYesnoTypes" placeholder="请选择申请状态">
                        <el-option label="通过" value="2"></el-option>
                        <el-option label="拒绝" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="申请结果">
                    <el-input type="textarea" v-model="form.shebiebaosunYesnoText" placeholder="申请结果"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="shebiebaosunYesnoTypesVisible = false">取 消</el-button>
                <el-button type="primary" @click="shebiebaosunYesnoTypesShenhe">审 核</el-button>
            </div>
        </el-dialog>
        <!-- 条件查询 -->
        <div v-if="showFlag">
            <el-form :inline="true" :model="searchForm" class="form-content">
                <el-row :gutter="20" class="slt"
                    :style="{ justifyContent: contents.searchBoxPosition == '1' ? 'flex-start' : contents.searchBoxPosition == '2' ? 'center' : 'flex-end' }">

                    <el-form-item :label="contents.inputTitle == 1 ? '申请状态' : ''">
                        <el-select v-model="typeChangeForm.name" placeholder="请选择申请状态" @change="typeChange"
                            value-key="id">
                            <el-option label="=-请选择-=" value=""></el-option>
                            <el-option v-for="(item, index) in shebiebaosunYesnoTypesSelectSearch" v-bind:key="item.id"
                                :label="item.name" :value="item">
                                <!--lable是要展示的名称-->
                                <!--value是值-->
                            </el-option>
                        </el-select>
                    </el-form-item>



                    <el-form-item :label="contents.inputTitle == 1 ? '设备名称' : ''">
                        <el-input prefix-icon="el-icon-search" v-model="searchForm.deviceName" placeholder="设备名称"
                            clearable></el-input>
                    </el-form-item>

                    <el-form-item :label="contents.inputTitle == 1 ? '设备类型' : ''">
                        <el-select v-model="deviceTypeChangeForm.name" placeholder="请选择设备类型" value-key="deviceTypeId"
                            @change="deviceTypeChange">
                            <el-option label="=-请选择-=" value=""></el-option>
                            <el-option v-for="(item, index) in shebeiTypesSelectSearch" v-bind:key="item.deviceTypeId"
                                :label="item.deviceTypeName" :value="item">
                                <!--lable是要展示的名称-->
                                <!--value是值-->
                            </el-option>
                        </el-select>
                    </el-form-item>


                    <el-form-item :label="contents.inputTitle == 1 ? '职员名称' : ''">
                        <el-input prefix-icon="el-icon-search" v-model="searchForm.userName" placeholder="职员名称"
                            clearable></el-input>
                    </el-form-item>



                    <el-form-item>
                        <el-button type="success" @click="search()">查询<i
                                class="el-icon-search el-icon--right" /></el-button>
                    </el-form-item>
                </el-row>
                <el-row class="ad"
                    :style="{ justifyContent: contents.btnAdAllBoxPosition == '1' ? 'flex-start' : contents.btnAdAllBoxPosition == '2' ? 'center' : 'flex-end' }">
                    <el-form-item>
                        <el-button v-if="isAuth('shebiebaosun', '新增')" type="success" icon="el-icon-plus"
                            @click="addOrUpdateHandler()">新增</el-button>
                        &nbsp;
                        <el-button v-if="isAuth('shebiebaosun', '删除')" :disabled="ids.length <= 0" type="danger"
                            icon="el-icon-delete" @click="deleteAllHandler()">删除</el-button>
                        &nbsp;
                        <el-button v-if="isAuth('shebiebaosun', '报表')" type="success" icon="el-icon-pie-chart"
                            @click="chartDialog()">报表</el-button>
                        &nbsp;
                        <a style="text-decoration:none" class="el-button el-button--success"
                            v-if="isAuth('shebiebaosun', '导入导出')" icon="el-icon-download"
                            href="http://localhost:8080/xiaoxingyiyuanyiliaoshebei/upload/shebiebaosunMuBan.xls">批量导入设备报损数据模板</a>
                        &nbsp;
                        <el-upload v-if="isAuth('shebiebaosun', '导入导出')" style="display: inline-block"
                            :action="getActionUrl" :on-success="shebiebaosunUploadSuccess"
                            :on-error="shebiebaosunUploadError" :show-file-list=false>
                            <el-button v-if="isAuth('shebiebaosun', '导入导出')" type="success"
                                icon="el-icon-upload2">批量导入设备报损数据</el-button>
                        </el-upload>
                        &nbsp;
                        <!-- 导出excel -->
                        <download-excel v-if="isAuth('shebiebaosun', '导入导出')" style="display: inline-block"
                            class="export-excel-wrapper" :data="dataList" :fields="json_fields" name="shebiebaosun.xls">
                            <!-- 导出excel -->
                            <el-button type="success" icon="el-icon-download">导出</el-button>
                        </download-excel>
                        &nbsp;
                    </el-form-item>
                </el-row>
            </el-form>
            <div class="table-content">
                <el-table class="tables" :size="contents.tableSize" :show-header="contents.tableShowHeader"
                    :header-row-style="headerRowStyle" :header-cell-style="headerCellStyle"
                    :border="contents.tableBorder" :fit="contents.tableFit" :stripe="contents.tableStripe"
                    :row-style="rowStyle" :cell-style="cellStyle"
                    :style="{ width: '100%', fontSize: contents.tableContentFontSize, color: contents.tableContentFontColor }"
                    v-if="isAuth('shebiebaosun', '查看')" :data="dataList" v-loading="dataListLoading"
                    @select-all="selectAll" @selection-change="selectionChangeHandler">
                    <el-table-column v-if="contents.tableSelection" type="selection" header-align="center"
                        align="center" width="50">
                    </el-table-column>
                    <el-table-column label="索引" v-if="contents.tableIndex" type="index" width="50" />
                    <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
                        prop="shebeiUuidNumber" header-align="center" label="设备编号">
                        <template slot-scope="scope">
                            {{ scope.row.affairsDeviceNumber }}
                        </template>
                    </el-table-column>
                    <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign" prop="shebeiName"
                        header-align="center" label="设备名称">
                        <template slot-scope="scope">
                            {{ scope.row.affairsDeviceName }}
                        </template>
                    </el-table-column>
                    <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign" prop="shebeiTypes"
                        header-align="center" label="设备类型">
                        <template slot-scope="scope">
                            {{ scope.row.affairsDeviceTypeName }}
                        </template>
                    </el-table-column>
                    <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign" prop="yonghuName"
                        header-align="center" label="职员名称">
                        <template slot-scope="scope">
                            {{ scope.row.affairsUserNick }}
                        </template>
                    </el-table-column>
                    <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign" prop="yonghuPhone"
                        header-align="center" label="职员手机号">
                        <template slot-scope="scope">
                            {{ scope.row.affairsUserPhone }}
                        </template>
                    </el-table-column>
                    <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign" prop="yonghuPhoto"
                        header-align="center" width="200" label="职员头像">
                        <template slot-scope="scope">
                            <div v-if="scope.row.affairsUserImgUrl">
                                <img :src="$base.imgUrl + scope.row.affairsUserImgUrl" width="100" height="100">
                            </div>
                            <div v-else>无图片</div>
                        </template>
                    </el-table-column>
                    <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
                        prop="shebiebaosunNumber" header-align="center" label="报损数量">
                        <template slot-scope="scope">
                            {{ scope.row.affairsNumber }}
                        </template>
                    </el-table-column>
                    <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
                        prop="shebiebaosunText" header-align="center" label="备注">
                        <template slot-scope="scope">
                            <span v-if="scope.row.affairsMessage != null && scope.row.affairsMessage.length > 10">
                                {{ scope.row.affairsMessage.slice(0, 10) }}...
                            </span>
                            <span v-else>
                                {{ scope.row.affairsMessage }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
                        prop="shebiebaosunYesnoTypes" header-align="center" label="申请状态">
                        <template slot-scope="scope">
                            {{ scope.row.affairsType
                                == 0 ? '员工申请' : (scope.row.affairsType == 1 ? '领导批复' : (scope.row.affairsType == 2 ? '管理员提交'
                                    : '员工确定')) }}
                        </template>
                    </el-table-column>
                    <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
                        prop="shebiebaosunYesnoText" header-align="center" label="申请结果">
                        <template slot-scope="scope">
                            <span v-if="scope.row.affairsEnd != null && scope.row.affairsEnd.length > 10">
                                <!-- {{scope.row.shebiebaosunYesnoText.slice(0,10)}}... -->
                                {{
                                    scope.row.affairsEnd == 0 ? '已提交' : (scope.row.affairsEnd == 1 ? '已审核' :
                                        (scope.row.affairsEnd == 2 ? '已确定' : '已完成'))
                                }}
                            </span>
                            <!-- <span v-else>
                                {{scope.row.shebiebaosunYesnoText}}
                            </span> -->
                        </template>
                    </el-table-column>

                    <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign" prop="insertTime"
                        header-align="center" label="录入时间">
                        <template slot-scope="scope">
                            {{ scope.row.time }}
                        </template>
                    </el-table-column>

                    <el-table-column width="300" :align="contents.tableAlign" header-align="center" label="操作">
                        <template slot-scope="scope">
                            <el-button v-if="sessionTable == 'false'" type="primary" size="mini"
                                @click="wuyong(scope.row.affairsId)">无用按钮</el-button>
                            <el-button v-if="sessionTable == 'false'" type="success" icon="el-icon-printer" size="mini"
                                @click="dayinOpen(scope.row)">打印</el-button>
                            <el-button v-if="isAuth('shebiebaosun', '查看')" type="success" icon="el-icon-tickets"
                                size="mini" @click="addOrUpdateHandler(scope.row.affairsId, 'info')">详情</el-button>
                            <!-- <el-button v-if="isAuth('shebiebaosun', '修改')" type="primary" icon="el-icon-edit" size="mini"
                                @click="addOrUpdateHandler(scope.row.affairsId)">修改</el-button> -->
                            <el-button v-if="isAuth('shebiebaosun', '删除')" type="danger" icon="el-icon-delete"
                                size="mini" @click="deleteHandler(scope.row.affairsId)">删除</el-button>
                            <el-button v-if="isAuth('shebiebaosun', '审核') && scope.row.affairsType == 0" type="primary"
                                icon="el-icon-thumb" size="mini"
                                @click="openYesnoTypes(scope.row.affairsId)">审核</el-button>

                        </template>
                    </el-table-column>
                </el-table>
                <!-- <el-pagination
                        clsss="pages"
                        :layout="layouts"
                        @size-change="sizeChangeHandle"
                        @current-change="currentChangeHandle"
                        :current-page="pageIndex"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="Number(contents.pageEachNum)"
                        :total="totalPage"
                        :small="contents.pageStyle"
                        class="pagination-content"
                        :background="contents.pageBtnBG"
                        :style="{textAlign:contents.pagePosition==1?'left':contents.pagePosition==2?'center':'right'}"
                ></el-pagination> -->
                <el-pagination clsss="pages" :layout="layouts" @size-change="sizeChangeHandle"
                    @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]"
                    :page-size="Number(contents.pageEachNum)" :total="totalPage" :small="contents.pageStyle"
                    class="pagination-content" :background="contents.pageBtnBG"
                    :style="{ textAlign: contents.pagePosition == 1 ? 'left' : contents.pagePosition == 2 ? 'center' : 'right' }"></el-pagination>
            </div>
        </div>
        <!-- 添加/修改页面  将父组件的search方法传递给子组件-->
        <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>


        <el-dialog title="打印" :visible.sync="printVisiable" width="500px">
            <el-form ref="printContent" :model="printFrom" label-width="auto">
                <el-form-item label="发件人">
                    <div style="display: flex">
                        <el-input v-model="printFrom.kuaidiFajianName" disabled></el-input>
                        :
                        <el-input v-model="printFrom.kuaidiFajianShoujihao" disabled></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="发件人地址">
                    <el-input v-model="printFrom.kuaidiFajianAddress" disabled></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="printContent()" icon="el-icon-printer" type="success">打印</el-button>
                <el-button @click="printVisiable = false">关闭</el-button>
            </span>
        </el-dialog>

        <el-dialog title="统计报表" :visible.sync="chartVisiable" width="80%">
            <el-date-picker v-model="echartsDate" type="year" placeholder="选择年"> </el-date-picker>
            <el-button @click="chartDialog()">查询</el-button>
            <div id="statistic" style="width:100%;height:600px;"></div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="chartVisiable = false">关闭</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
import AddOrUpdate from "./add-or-update";
import styleJs from "../../../utils/style.js";
import utilsJs, { getYearFormat, getMonthFormat, getDateFormat, getDatetimeFormat } from "../../../utils/utils.js";

export default {
    data() {
        return {
            typeChangeForm: {
                name: ''
            },
            deviceTypeChangeForm: {
                name: ''
            },
            //打印开始
            printFrom: {
                name1: "",
            },
            printVisiable: false,
            //打印结束
            searchForm: {
                page: 1,
                size: 10,
                category: 3
            },
            sessionTable: "",//登录账户所在表名
            role: "",//权限
            userId: "",//当前登录人的id
            //级联表下拉框搜索条件
            shebeiTypesSelectSearch: [],
            keshiTypesSelectSearch: [],
            keshiTypesSelectSearch: [],
            //当前表下拉框搜索条件
            shebiebaosunYesnoTypesSelectSearch: [
                {
                    id: 0,
                    name: '员工申请'
                },
                {
                    id: 1,
                    name: '领导批复'
                },
                {
                    id: 2,
                    name: '管理员提交'
                },
                {
                    id: 3,
                    name: '员工确定'
                }
            ],
            ids: [],
            form: {
                id: null,
                shebeiId: null,
                yonghuId: null,
                shebiebaosunNumber: null,
                shebiebaosunText: null,
                shebiebaosunYesnoTypes: null,
                shebiebaosunYesnoText: null,
                insertTime: null,
                createTime: null,
            },
            dataList: [],
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            dataListLoading: false,
            dataListSelections: [],
            showFlag: true,
            sfshVisiable: false,
            shForm: {},
            chartVisiable: false,
            echartsDate: new Date(),//echarts的时间查询字段
            addOrUpdateFlag: false,
            contents: null,
            layouts: '',

            shebiebaosunYesnoTypesVisible: false,

            //导出excel
            json_fields: {
                //级联表字段
                '设备编号': 'shebeiUuidNumber',
                '设备名称': 'shebeiName',
                '设备类型': 'shebeiTypes',
                '设备库存': 'shebeiKucunNumber',
                '所在科室': 'keshiTypes',
                '职员名称': 'yonghuName',
                '职员手机号': 'yonghuPhone',
                '职员身份证号': 'yonghuIdNumber',
                '职员头像': 'yonghuPhoto',
                '科室': 'keshiTypes',
                '职员邮箱': 'yonghuEmail',
                //本表字段
                '报损数量': "shebiebaosunNumber",
                '备注': "shebiebaosunText",
                '申请状态': "shebiebaosunYesnoValue",
                '申请结果': "shebiebaosunYesnoText",
                '录入时间': "insertTime",
            },

        };
    },
    created() {
        this.contents = styleJs.listStyle();
        this.init();
        this.getDataList();
        this.contentStyleChange()
    },
    mounted() {
        //获取当前登录科室职员的信息
        this.sessionTable = this.$storage.get("sessionTable");
        this.role = this.$storage.get("role");
        this.userId = this.$storage.get("userId");

    },
    filters: {
        htmlfilter: function (val) {
            return val.replace(/<[^>]*>/g).replace(/undefined/g, '');
        }
    },
    components: {
        AddOrUpdate,
    },
    computed: {
        getActionUrl: function () {
            return `/` + this.$base.name + `/file/upload`;
        }
    },
    methods: {
        selectAll(selection) {
            const arr = []
            selection.forEach(v => {
                arr.push(v.affairsId)
            })
            this.ids = arr
        },
        typeChange(e) {
            this.searchForm.type = e.id
        },
        deviceTypeChange(e) {
            this.searchForm.deviceTypeId = e.deviceTypeId
        },
        chartDialog() {
            let _this = this;
            let params = {
                dateFormat: "%Y", //%Y-%m
                riqi: getYearFormat(_this.echartsDate),//年
                // riqi :getMonthFormat(_this.echartsDate),//年月
                thisTable: {//当前表
                    tableName: 'shebiebaosun',//当前表表名,
                    sumColum: 'shebiebaosun_number', //求和字段
                    date: 'insert_time',//分组日期字段
                    // string : 'shebiebaosun_name',//分组字符串字段
                    // types : 'shebiebaosun_types',//分组下拉框字段
                },
                // joinTable : {//级联表（可以不存在）
                //     tableName :'yonghu',//级联表表名
                //     // date : 'insert_time',//分组日期字段
                //     string : 'yonghu_name',//分组字符串字段
                //     // types : 'yonghu_types',//分组下拉框字段
                // }
            }
            _this.chartVisiable = true;
            _this.$nextTick(() => {
                var statistic = this.$echarts.init(document.getElementById("statistic"), 'macarons');
                this.$http({
                    url: "barSum",//barCountOne barCountTwo barSumOne barSumTwo
                    method: "get",
                    params: params
                }).then(({ data }) => {
                    if (data && data.code === 0) {
                        let yAxisName = "数值";//y轴
                        let xAxisName = "月份";//x轴
                        let series = [];//具体数据值
                        data.data.yAxis.forEach(function (item, index) {//点击可关闭的按钮字符串在后台方法中
                            let tempMap = {};
                            tempMap.name = data.data.legend[index];
                            tempMap.type = 'bar';
                            tempMap.data = item;
                            series.push(tempMap);
                        })

                        var option = {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'cross',
                                    crossStyle: {
                                        color: '#999'
                                    }
                                }
                            },
                            toolbox: {
                                feature: {
                                    // dataView: { show: true, readOnly: false },  // 数据查看
                                    magicType: { show: true, type: ['line', 'bar'] },//切换图形展示方式
                                    // restore: { show: true }, // 刷新
                                    saveAsImage: { show: true }//保存
                                }
                            },
                            legend: {
                                data: data.data.legend//标题  可以点击导致某一列数据消失
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    axisLabel: { interval: 0 },
                                    name: xAxisName,
                                    data: data.data.xAxis,
                                    axisPointer: {
                                        type: 'shadow'
                                    }
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value',//不能改
                                    name: yAxisName,//y轴单位
                                    axisLabel: {
                                        formatter: '{value}' // 后缀
                                    }
                                }
                            ],
                            series: series//具体数据
                        };
                        statistic.setOption(option, true);
                        window.onresize = function () {
                            statistic.resize();
                        };
                    } else {
                        this.$message({
                            message: "报表未查询到数据",
                            type: "success",
                            duration: 1500,
                            onClose: () => {
                                this.search();
                            }
                        });
                    }
                });
            });
            ////饼状图
            //_this.chartVisiable = true;
            // this.$nextTick(()=>{
            //     var statistic = this.$echarts.init(document.getElementById("statistic"),'macarons');
            //     let params = {
            //         tableName: "shebiebaosun",
            //         groupColumn: "shebiebaosun_types",
            //     }
            //     this.$http({
            //         url: "newSelectGroupCount",//pieSum pieCount
            //         method: "get",
            //         params: params
            //     }).then(({data}) => {
            //         if (data && data.code === 0) {
            //             let res = data.data;
            //             let xAxis = [];
            //             let yAxis = [];
            //             let pArray = []
            //             var option = {};
            //             for(let i=0;i<res.length;i++){
            //                 xAxis.push(res[i].name);
            //                 yAxis.push(res[i].value);
            //                 pArray.push({
            //                     value: res[i].value,
            //                     name: res[i].name
            //                 })
            //                 option = {
            //                     title: {
            //                         text: '保险合同类型统计',
            //                         left: 'center'
            //                     },
            //                     tooltip: {
            //                         trigger: 'item',
            //                         formatter: '{b} : {c} ({d}%)'
            //                     },
            //                     legend: {
            //                         orient: 'vertical',
            //                         left: 'left'
            //                     },
            //                     series: [
            //                         {
            //                             type: 'pie',
            //                             radius: '55%',
            //                             center: ['50%', '60%'],
            //                             data: pArray,
            //                             emphasis: {
            //                                 itemStyle: {
            //                                     shadowBlur: 10,
            //                                     shadowOffsetX: 0,
            //                                     shadowColor: 'rgba(0, 0, 0, 0.5)'
            //                                 }
            //                             }
            //                         }
            //                     ]
            //                 };
            //             }
            //             statistic.setOption(option,true);
            //             window.onresize = function() {
            //                 statistic.resize();
            //             };
            //         }
            //     });
            // })
        },
        contentStyleChange() {
            this.contentSearchStyleChange()
            this.contentBtnAdAllStyleChange()
            this.contentSearchBtnStyleChange()
            this.contentTableBtnStyleChange()
            this.contentPageStyleChange()
        },
        contentSearchStyleChange() {
            this.$nextTick(() => {
                document.querySelectorAll('.form-content .slt .el-input__inner').forEach(el => {
                    let textAlign = 'left'
                    if (this.contents.inputFontPosition == 2)
                        textAlign = 'center'
                    if (this.contents.inputFontPosition == 3) textAlign = 'right'
                    el.style.textAlign = textAlign
                    el.style.height = this.contents.inputHeight
                    el.style.lineHeight = this.contents.inputHeight
                    el.style.color = this.contents.inputFontColor
                    el.style.fontSize = this.contents.inputFontSize
                    el.style.borderWidth = this.contents.inputBorderWidth
                    el.style.borderStyle = this.contents.inputBorderStyle
                    el.style.borderColor = this.contents.inputBorderColor
                    el.style.borderRadius = this.contents.inputBorderRadius
                    el.style.backgroundColor = this.contents.inputBgColor
                })
                if (this.contents.inputTitle) {
                    document.querySelectorAll('.form-content .slt .el-form-item__label').forEach(el => {
                        el.style.color = this.contents.inputTitleColor
                        el.style.fontSize = this.contents.inputTitleSize
                        el.style.lineHeight = this.contents.inputHeight
                    })
                }
                setTimeout(() => {
                    document.querySelectorAll('.form-content .slt .el-input__prefix').forEach(el => {
                        el.style.color = this.contents.inputIconColor
                        el.style.lineHeight = this.contents.inputHeight
                    })
                    document.querySelectorAll('.form-content .slt .el-input__suffix').forEach(el => {
                        el.style.color = this.contents.inputIconColor
                        el.style.lineHeight = this.contents.inputHeight
                    })
                    document.querySelectorAll('.form-content .slt .el-input__icon').forEach(el => {
                        el.style.lineHeight = this.contents.inputHeight
                    })
                }, 10)
            })
        },
        // 搜索按钮
        contentSearchBtnStyleChange() {
            this.$nextTick(() => {
                document.querySelectorAll('.form-content .slt .el-button--success').forEach(el => {
                    el.style.height = this.contents.searchBtnHeight
                    el.style.color = this.contents.searchBtnFontColor
                    el.style.fontSize = this.contents.searchBtnFontSize
                    el.style.borderWidth = this.contents.searchBtnBorderWidth
                    el.style.borderStyle = this.contents.searchBtnBorderStyle
                    el.style.borderColor = this.contents.searchBtnBorderColor
                    el.style.borderRadius = this.contents.searchBtnBorderRadius
                    el.style.backgroundColor = this.contents.searchBtnBgColor
                })
            })
        },
        // 新增、批量删除
        contentBtnAdAllStyleChange() {
            this.$nextTick(() => {
                document.querySelectorAll('.form-content .ad .el-button--success').forEach(el => {
                    el.style.height = this.contents.btnAdAllHeight
                    el.style.color = this.contents.btnAdAllAddFontColor
                    el.style.fontSize = this.contents.btnAdAllFontSize
                    el.style.borderWidth = this.contents.btnAdAllBorderWidth
                    el.style.borderStyle = this.contents.btnAdAllBorderStyle
                    el.style.borderColor = this.contents.btnAdAllBorderColor
                    el.style.borderRadius = this.contents.btnAdAllBorderRadius
                    el.style.backgroundColor = this.contents.btnAdAllAddBgColor
                })
                document.querySelectorAll('.form-content .ad .el-button--danger').forEach(el => {
                    el.style.height = this.contents.btnAdAllHeight
                    el.style.color = this.contents.btnAdAllDelFontColor
                    el.style.fontSize = this.contents.btnAdAllFontSize
                    el.style.borderWidth = this.contents.btnAdAllBorderWidth
                    el.style.borderStyle = this.contents.btnAdAllBorderStyle
                    el.style.borderColor = this.contents.btnAdAllBorderColor
                    el.style.borderRadius = this.contents.btnAdAllBorderRadius
                    el.style.backgroundColor = this.contents.btnAdAllDelBgColor
                })
                document.querySelectorAll('.form-content .ad .el-button--warning').forEach(el => {
                    el.style.height = this.contents.btnAdAllHeight
                    el.style.color = this.contents.btnAdAllWarnFontColor
                    el.style.fontSize = this.contents.btnAdAllFontSize
                    el.style.borderWidth = this.contents.btnAdAllBorderWidth
                    el.style.borderStyle = this.contents.btnAdAllBorderStyle
                    el.style.borderColor = this.contents.btnAdAllBorderColor
                    el.style.borderRadius = this.contents.btnAdAllBorderRadius
                    el.style.backgroundColor = this.contents.btnAdAllWarnBgColor
                })
            })
        },
        // 表格
        rowStyle({ row, rowIndex }) {
            if (rowIndex % 2 == 1) {
                if (this.contents.tableStripe) {
                    return { color: this.contents.tableStripeFontColor }
                }
            } else {
                return ''
            }
        },
        cellStyle({ row, rowIndex }) {
            if (rowIndex % 2 == 1) {
                if (this.contents.tableStripe) {
                    return { backgroundColor: this.contents.tableStripeBgColor }
                }
            } else {
                return ''
            }
        },
        headerRowStyle({ row, rowIndex }) {
            return { color: this.contents.tableHeaderFontColor }
        },
        headerCellStyle({ row, rowIndex }) {
            return { backgroundColor: this.contents.tableHeaderBgColor }
        },
        // 表格按钮
        contentTableBtnStyleChange() {
            // this.$nextTick(()=>{
            //   setTimeout(()=>{
            //     document.querySelectorAll('.table-content .tables .el-table__body .el-button--success').forEach(el=>{
            //       el.style.height = this.contents.tableBtnHeight
            //       el.style.color = this.contents.tableBtnDetailFontColor
            //       el.style.fontSize = this.contents.tableBtnFontSize
            //       el.style.borderWidth = this.contents.tableBtnBorderWidth
            //       el.style.borderStyle = this.contents.tableBtnBorderStyle
            //       el.style.borderColor = this.contents.tableBtnBorderColor
            //       el.style.borderRadius = this.contents.tableBtnBorderRadius
            //       el.style.backgroundColor = this.contents.tableBtnDetailBgColor
            //     })
            //     document.querySelectorAll('.table-content .tables .el-table__body .el-button--primary').forEach(el=>{
            //       el.style.height = this.contents.tableBtnHeight
            //       el.style.color = this.contents.tableBtnEditFontColor
            //       el.style.fontSize = this.contents.tableBtnFontSize
            //       el.style.borderWidth = this.contents.tableBtnBorderWidth
            //       el.style.borderStyle = this.contents.tableBtnBorderStyle
            //       el.style.borderColor = this.contents.tableBtnBorderColor
            //       el.style.borderRadius = this.contents.tableBtnBorderRadius
            //       el.style.backgroundColor = this.contents.tableBtnEditBgColor
            //     })
            //     document.querySelectorAll('.table-content .tables .el-table__body .el-button--danger').forEach(el=>{
            //       el.style.height = this.contents.tableBtnHeight
            //       el.style.color = this.contents.tableBtnDelFontColor
            //       el.style.fontSize = this.contents.tableBtnFontSize
            //       el.style.borderWidth = this.contents.tableBtnBorderWidth
            //       el.style.borderStyle = this.contents.tableBtnBorderStyle
            //       el.style.borderColor = this.contents.tableBtnBorderColor
            //       el.style.borderRadius = this.contents.tableBtnBorderRadius
            //       el.style.backgroundColor = this.contents.tableBtnDelBgColor
            //     })

            //   }, 50)
            // })
        },
        // 分页
        contentPageStyleChange() {
            let arr = []
            if (this.contents.pageTotal) arr.push('total')
            if (this.contents.pageSizes) arr.push('sizes')
            if (this.contents.pagePrevNext) {
                arr.push('prev')
                if (this.contents.pagePager) arr.push('pager')
                arr.push('next')
            }
            if (this.contents.pageJumper) arr.push('jumper')
            this.layouts = arr.join()
            this.contents.pageEachNum = 10
        },

        init() {
        },
        search() {
            this.getDataList();
        },
        // 获取数据列表
        getDataList() {
            this.dataListLoading = true;
            let params = {
                page: this.pageIndex,
                limit: this.pageSize,
                sort: 'id',
            }


            if (this.searchForm.shebeiName != '' && this.searchForm.shebeiName != undefined) {
                params['shebeiName'] = '%' + this.searchForm.shebeiName + '%'
            }

            if (this.searchForm.shebeiTypes != '' && this.searchForm.shebeiTypes != undefined) {
                params['shebeiTypes'] = this.searchForm.shebeiTypes
            }

            if (this.searchForm.keshiTypes != '' && this.searchForm.keshiTypes != undefined) {
                params['keshiTypes'] = this.searchForm.keshiTypes
            }

            if (this.searchForm.yonghuName != '' && this.searchForm.yonghuName != undefined) {
                params['yonghuName'] = '%' + this.searchForm.yonghuName + '%'
            }

            if (this.searchForm.keshiTypes != '' && this.searchForm.keshiTypes != undefined) {
                params['keshiTypes'] = this.searchForm.keshiTypes
            }

            if (this.searchForm.shebiebaosunYesnoTypes != '' && this.searchForm.shebiebaosunYesnoTypes != undefined) {
                params['shebiebaosunYesnoTypes'] = this.searchForm.shebiebaosunYesnoTypes
            }

            params['shebiebaosunDelete'] = 1// 逻辑删除字段 1 未删除 2 删除


            this.$http({
                url: `${this.$storage.get("sessionTable")}/affairs/get_affairs_report_losses`,
                method: "post",
                data: this.searchForm
            }).then(({ data }) => {
                if (data && data.code === 200) {
                    data.data.forEach(item => {
                        item.time = new Date(+new Date(item.saveTime) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
                    })
                    console.log('设备报损列表', data);
                    this.dataList = data.data
                    this.totalPage = data.total
                } else {
                    this.dataList = [];
                    this.totalPage = 0;
                }
                this.dataListLoading = false;
            });

            //查询级联表搜索条件所有列表
            this.$http({
                url: "/list/api/device_type_api",
                method: "get"
            }).then(({ data }) => {
                if (data && data.code === 200) {
                    console.log('设备类型', data);
                    this.shebeiTypesSelectSearch = data.data
                }
            });
            this.$http({
                url: "dictionary/page?dicCode=keshi_types&page=1&limit=100",
                method: "get",
                page: 1,
                limit: 100,
            }).then(({ data }) => {
                if (data && data.code === 0) {
                    this.keshiTypesSelectSearch = data.data.list;
                }
            });
            this.$http({
                url: "dictionary/page?dicCode=keshi_types&page=1&limit=100",
                method: "get",
                page: 1,
                limit: 100,
            }).then(({ data }) => {
                if (data && data.code === 0) {
                    this.keshiTypesSelectSearch = data.data.list;
                }
            });
            //查询当前表搜索条件所有列表
            //填充下拉框选项
            this.$http({
                url: "dictionary/page?dicCode=shebiebaosun_yesno_types&page=1&limit=100",
                method: "get",
            }).then(({ data }) => {
                if (data && data.code === 0) {
                    this.shebiebaosunYesnoTypesSelectSearch = data.data.list;
                }
            });
        },
        //每页数
        sizeChangeHandle(val) {
            this.searchForm.size = val
            this.getDataList();
        },
        // 当前页
        currentChangeHandle(val) {
            this.searchForm.page = val;
            this.getDataList();
        },
        // 多选
        selectionChangeHandler(val) {
            console.log(val);
            let arr = []
            for (let i = 0; i < val.length; i++) {
                arr.push(val[i].affairsId)
            }
            let list = []
            for (let i = 0; i < arr.length; i++) {
                if (list.indexOf(arr[i]) === -1) {
                    list.push(arr[i])
                }
            }
            this.ids = list
        },
        // 添加/修改
        addOrUpdateHandler(id, type) {
            this.showFlag = false;
            this.addOrUpdateFlag = true;
            this.crossAddOrUpdateFlag = false;
            if (type != 'info') {
                type = 'else';
            }
            this.$nextTick(() => {
                this.$refs.addOrUpdate.init(id, type);
            });
        },
        // 下载
        download(file) {
            window.open(" ${file} ")
        },
        // 弹出打印模态框
        dayinOpen(item) {
            let _this = this;
            _this.printVisiable = true;
            _this.printFrom = item;
        },
        // 打印内容
        printContent() {
            let _this = this;
            _this.$print(_this.$refs.printContent)
            _this.printVisiable = false;
        },
        // 删除
        deleteHandler(id) {
            this.$http({
                url: `${this.$storage.get("sessionTable")}/affairs/remove_affairs?id=${id}&memo=${value}`,
                method: "get",
            }).then(({ data }) => {
                if (data && data.code === 200) {
                    this.$message({
                        message: "操作成功",
                        type: "success",
                        duration: 1500,
                        onClose: () => {
                            this.search();
                        }
                    });
                } else {
                    this.$message.error(data.message);
                }
            })
        },
        deleteAllHandler() {
            this.$http({
                url: `${this.$storage.get("sessionTable")}/affairs/remove_affairs_arr?ids=${this.ids}&memo=${value}`,
                method: "get",
            }).then(({ data }) => {
                console.log(data);
                if (data && data.code === 200) {
                    this.$message({
                        message: "操作成功",
                        type: "success",
                        duration: 1500,
                        onClose: () => {
                            this.search();
                        }
                    });
                } else {
                    this.$message.error(data.message);
                }
            })
        },
        // 导入功能上传文件成功后调用导入方法
        shebiebaosunUploadSuccess(data) {
            let _this = this;
            _this.$http({
                url: "shebiebaosun/batchInsert?fileName=" + data.file,
                method: "get"
            }).then(({ data }) => {
                if (data && data.code === 0) {
                    _this.$message({
                        message: "导入设备报损数据成功",
                        type: "success",
                        duration: 1500,
                        onClose: () => {
                            _this.search();
                        }
                    });
                } else {
                    _this.$message.error(data.message);
                }
            });

        },
        // 导入功能上传文件失败后调用导入方法
        shebiebaosunUploadError(data) {
            this.$message.error('上传失败');
        },
        openYesnoTypes(id) {
            let _this = this;
            _this.form.id = null;
            _this.form.id = id;
            _this.form.shebiebaosunYesnoText = null;
            _this.form.shebiebaosunYesnoTypes = "请选择申请状态";
            _this.shebiebaosunYesnoTypesVisible = true;
        },

        shebiebaosunYesnoTypesShenhe() {
            let _this = this;
            if (_this.form.shebiebaosunYesnoTypes == "请选择申请状态") {
                _this.$message.error("请选择申请状态");
                return false;
            }
            if (_this.form.shebiebaosunYesnoText == null || _this.form.shebiebaosunYesnoText == "") {
                _this.$message.error("请输入申请结果");
                return false;
            }
            if (this.form.shebiebaosunYesnoTypes == '2') {
                console.log('awa', _this.form.id);
                this.$http({
                    url: `${this.$storage.get("sessionTable")}/affairs/affairs_true?id=${_this.form.id}`,
                    method: "get",
                    data: _this.form
                }).then(({ data }) => {
                    if (data && data.code === 200) {
                        this.$message({
                            message: "审核成功",
                            type: "success",
                            duration: 1500,
                            onClose: () => {
                                _this.shebiebaosunYesnoTypesVisible = false;
                                _this.search();
                            }
                        });
                    } else {
                        this.$message.error(data.message);
                        _this.shebiebaosunYesnoTypesVisible = false;
                    }
                });
            } else {
                this.$http({
                    url: `${this.$storage.get("sessionTable")}/affairs/affairs_false?id=${_this.form.id}&memo=${_this.form.shebiebaosunYesnoText}`,
                    method: "get",
                    data: _this.form
                }).then(({ data }) => {
                    if (data && data.code === 200) {
                        this.$message({
                            message: "审核成功",
                            type: "success",
                            duration: 1500,
                            onClose: () => {
                                _this.shebiebaosunYesnoTypesVisible = false;
                                _this.search();
                            }
                        });
                    } else {
                        this.$message.error(data.message);
                        _this.shebiebaosunYesnoTypesVisible = false;
                    }
                });
            }
        },            //无用
        wuyong(id) {
            let _this = this;
            _this.$confirm(`确定    操作?`, "提示", {
                confirmButtonText: "确定", cancelButtonText: "取消", type: "warning"
            }).then(() => {
                _this.$http({
                    url: "shebiebaosun/update",
                    method: "post",
                    data: {
                        id: id,
                        //                            shebiebaosunTypes:shebiebaosunTypes,
                    }
                }).then(({ data }) => {
                    if (data && data.code === 0) {
                        _this.$message({
                            message: "操作成功", type: "success", duration: 1500, onClose: () => {
                                _this.search();
                            }
                        });
                    } else {
                        _this.$message.error(data.message);
                    }
                });
            });
        },
    }
};
</script>
<style lang="scss" scoped>
.slt {
    margin: 0 !important;
    display: flex;
}

.ad {
    margin: 0 !important;
    display: flex;
}

.pages {
    & /deep/ el-pagination__sizes {
        & /deep/ el-input__inner {
            height: 22px;
            line-height: 22px;
        }
    }
}


.el-button+.el-button {
    margin: 0;
}

.tables {
    & /deep/ .el-button--success {
        height: 40px;
        color: rgba(255, 255, 255, 1);
        font-size: 14px;
        border-width: 4px;
        border-style: double;
        border-color: rgba(255, 255, 255, 1);
        border-radius: 4px;
        background-color: var(--publicMainColor);
    }

    & /deep/ .el-button--primary {
        height: 40px;
        color: rgba(255, 255, 255, 1);
        font-size: 14px;
        border-width: 4px;
        border-style: double;
        border-color: rgba(255, 255, 255, 1);
        border-radius: 4px;
        background-color: var(--publicMainColor);
    }

    & /deep/ .el-button--danger {
        height: 40px;
        color: rgba(255, 255, 255, 1);
        font-size: 14px;
        border-width: 4px;
        border-style: double;
        border-color: rgba(255, 255, 255, 1);
        border-radius: 4px;
        background-color: var(--publicMainColor);
    }

    & /deep/ .el-button {
        margin: 4px;
    }
}

.form-content {
    background: transparent;
}

.table-content {
    background: transparent;
}

.tables /deep/ .el-table__body tr {
    background-color: #f5f5f5 !important;
    color: rgba(0, 0, 0, 1) !important;
}

.tables /deep/ .el-table__body tr.el-table__row--striped td {
    background: transparent;
}

.tables /deep/ .el-table__body tr.el-table__row--striped {
    background-color: var(--publicSubColor) !important;
    color: rgba(0, 0, 0, 1) !important;
}

.tables /deep/ .el-table__body tr:hover>td {
    background-color: var(--publicSubColor) !important;
    color: #333 !important;
}
</style>
